<!DOCTYPE html>
<html>
<head>
	<title>矩形碰撞</title>
	<style type="text/css">
	#big{
		width: 800px;
		height: 800px;
		border: 1px solid black;
		position: relative;
	}
	#small{
		width: 100px;
		height: 100px;
		background-color: gray;
		position: absolute;
	}
	#small2{
		width: 100px;
		height: 100px;
		background-color: red;
		position: absolute;
		top: 100px;
		left: 300px;
	}
	</style>
</head>
<body>
<div id="big">
	<div id="small">small</div>
	<div id="small2">small2</div>
</div>
</body>
<script type="text/javascript">
	
	var big = document.getElementById('big');
	var small = document.getElementById('small');
	var small2 = document.getElementById('small2');

	small.onmousedown = function(event){
		var x = event.clientX - small.offsetLeft;
		var y = event.clientY - small.offsetTop;

		document.onmousemove = function(event){
			var _x = event.clientX;
			var _y = event.clientY;

			small.style.left = _x - x +'px';
			small.style.top = _y - y +'px';

			// 
			if ((small.offsetLeft + small.offsetWidth) >= small2.offsetLeft && (small2.offsetLeft + small2.offsetWidth) >= small.offsetLeft && (small.offsetTop + small.offsetHeight) >= small2.offsetTop && (small2.offsetTop + small2.offsetHeight) >= small.offsetTop) {
				small2.style.backgroundColor = 'yellow';
			}else{
				small2.style.backgroundColor = 'red';
			};
		}
	}
	small.onmouseup = function(){
		document.onmousemove = '';
	}
</script>
</html>






















